<style>
	.editTable .label {
		min-width: 60px;
		width: 60px;
	}

	.selectClass {
		border: 1px solid #ffa8a8;
	}

	.depInputClass {
		border: 1px solid #ffa8a8;
		background-color: #fff3f3;
	}
</style>
<form id="editForm" method="post">
	<input type="hidden" name="id" id="id">
	<input type="hidden" name="userFlag" id="userFlag">
	<table class="editTable">
		<tr>
			<td class="label">登录名</td>
			<td><input type="text" name="loginName" class="topjui-textbox"
			           data-options="required:true,validType:'length[1,20]'"
			           style="width: 200px;">
			</td>
			<td class="label">密码</td>
			<td><input type="text" name="passWord" class="topjui-passwordbox"
			           data-options="required:true,validType:'length[1,20]'"
			           style="width: 200px;">
			</td>
		</tr>
		<tr>
			<td class="label">名称</td>
			<td><input type="text" name="userName" class="topjui-textbox"
			           data-options="required:true,validType:'length[1,20]'"
			           style="width: 200px;">
			</td>
			<td class="label">角色</td>
			<td>
				<select id="roleId" name="RoleID" class="selectClass" style="width: 200px;height: 35px;">

				</select>
			</td>
		</tr>
		<tr>
			<td class="label">所属分组</td>
			<td colspan="3">
				<input name="depId" id="depId" type="hidden" value="0"/>
				<input name="depName" id="edit-department" type="text" readonly
				       value="" class="depInputClass"
				       style="width: 472px;height: 30px;" onclick="showMenu();"/>
			</td>
		</tr>
		<tr>
			<td class="label">手机号码</td>
			<td colspan="3"><input type="text" name="tel" class="topjui-textbox"
			                       data-options="validType:['length[0,30]','phoneRex']"
			                       style="width: 472px;">
			</td>
		</tr>
		<tr>
			<td class="label">备注</td>
			<td colspan="3">  <textarea style="width: 472px;height:80px;"
			                            maxlength="250" name="remark"></textarea>
			</td>
		</tr>
	</table>
</form>

<div id="depTree-win" class="topjui-dialog" title="分组树形" data-options="closed:true,iconCls:'icon-save',modal:true"
     style="width:500px;height:400px;">
	<ul id="zTree" class="ztree" style="margin: 3px;"></ul>
</div>

<script type="text/javascript">
	$(function () {
		$("#roleId").change(function () {
			var value = $(this).val();
			if (value == '') {
				$("#roleId").addClass('selectClass');
			} else {
				$("#roleId").removeClass('selectClass');
			}
		})
	})


	//ztree初始化设置
	var setting = {
		view: {
			dblClickExpand: false
		},
		data: {
			simpleData: {
				enable: true,
			}
		},
		callback: {
			onClick: onClick,
			//onCheck: onCheck
		}
	};
	//数据

	function onClick(e, treeId, treeNode) {

		if (treeNode) {
			var name = treeNode.name;
			$("#edit-department").val(name);
			$("#edit-department").removeClass('depInputClass');
			$("#depId").val(treeNode.id);
			hideMenu();
		}

	}

	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("zTree"),
				nodes = zTree.getCheckedNodes(true),
				v = "",
				id = "";
		code = ""
		for (var i = 0, l = nodes.length; i < l; i++) {
			v += nodes[i].name + ",";
			id += nodes[i].id + ","
			code += nodes[i].code + ","
		}
		if (v.length > 0) {
			v = v.substring(0, v.length - 1);
			id = id.substring(0, id.length - 1);
			code = code.substring(0, code.length - 1);
		}
		$("#edit-department").val(v);
		$("#depId").val(id);
	}

	function showMenu() {

		/*	var userFlag = $("#userFlag").val();

		 if (userFlag == '0') {
		 Bdth.alert('警告', '超级管理员无需配置分组.', 'messager-error');
		 return false;
		 }*/

		$("#depTree-win").dialog('open');
		$.post(path + "/dep/depTree", function (data) {
			//console.info(data);
			$.fn.zTree.init($("#zTree"), setting, data);
			var treeObj = $.fn.zTree.getZTreeObj("zTree");
			var nodes = treeObj.getNodes();
			if (nodes.length > 0) {
				for (var i = 0; i < nodes.length; i++) {
					treeObj.expandNode(nodes[i], true, false, false);
				}
			}
		});
	}
	function hideMenu() {
		$("#depTree-win").dialog('close');
	}

	//自定义验证
	$.extend($.fn.validatebox.defaults.rules, {
		phoneRex: {
			validator: function (value) {
				var rex = /^1\d{10}$/;
				//var rex=/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
				//区号：前面一个0，后面跟2-3位数字 ： 0\d{2,3}
				//电话号码：7-8位数字： \d{7,8
				//分机号：一般都是3位数字： \d{3,}
				//这样连接起来就是验证电话的正则表达式了：/^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/
				//var rex2 = /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
				if (rex.test(value)) {
					// alert('t'+value);
					return true;
				} else {
					//alert('false '+value);
					return false;
				}

			},
			message: '请输入正确手机号码'
		}

	});
</script>
